<template>
<!-- 我的帖子模块 -->
  <div>
    <van-list class="BBS_list" v-model:loading="loading" :finished="finished" @onLoad="onLoad" finished-text="没有更多了">
      <!-- v-for生成我的帖子cell -->
      <van-cell
        v-for="item in list"
        :key="item._id"
        title-style="flex:7"
        clickable
        @click="goToDetail(item)"   
      >
        <template #title>
          <van-skeleton title :row="3" :loading="false">
            <!-- 顶部分类名称 -->
            <div class="top">{{ item.type }}</div>
            <!-- 帖子内容区域 -->
            <div class="content">
              <div class="topic-tag" v-if="item.tag">
                <img src="../../assets/icon/tag.png" />
                <span>{{ item.tag }}</span>               
              </div>
              {{getLimitInfo(item.info)}}
            </div>
            <!-- 帖子图片 -->
            <div class="bottom" v-if="item.info_img">
              <van-image
                v-for="image in item.info_img"
                :key="image"
                width="1.5rem"
                height="1.5rem"
                fit="cover"
                :src="image"
                style="margin-right:2px"
              />
            </div>
          </van-skeleton>
        </template>
        <template #value>
          最新于{{getTimeBefore(item.updatedAt)}}
        </template>  
        <template #label>
          <!-- 底部模块 -->
          <div class="footer">
            <div class="footer_item">
               <van-icon
                name="good-job-o"
                size="0.6rem"
                color="red"
                class="icon"
              />
              <span>收到点赞数:{{item.like}}</span>
            </div>
            <div class="footer_item">              
               <van-icon
                name="chat-o"
                size="0.6rem"
                class="icon"
              />
              <span>评论数:{{item.commentNum}}</span>
            </div>
        </div>
        </template>     
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import { NavBar, Skeleton, Image as VanImage, List, Cell,Icon} from "vant";
import { formatTime } from "@/utils/formatTime";
export default {
  data() {
    return {     
      //nowNum:0,
      limit:4, //默认为4条
    };
  },
  methods: {
    //返回按钮
    onClickLeft() {
      history.back();
    },
    //向父组件暴露功能函数
    onLoad(){
      //this.getBSSlistItem();
      this.$emit('onLoading')
    },
    //前往详情页
    goToDetail(item){
      this.$emit("toDetail",item)
    },
    //获取时间信息
    getTimeBefore(createdTime) {
      let time = Math.floor(new Date(createdTime).getTime() / 1000);
      const str = formatTime(Number(time));
      return time >= 0 ? str : 0;
    },
    //内容限制转变为省略号
    getLimitInfo(info) {
      return info.length > 20 ? info.slice(0, 20) + ". . ." : info;
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Skeleton.name]: Skeleton,
    [VanImage.name]: VanImage,
    [List.name]: List,
    [Cell.name]: Cell,
    [Icon.name]:Icon
  },
  props:['list','total','finished','loading']
};
</script>
<style lang="less" scoped>
.BBS_list {
  text-align: left;
  .top {
    font-size: 19px;
    font-weight: bolder;
    padding: 8px 0;
  }
  .content {
    font-size: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
    .topic-tag {
    padding: 0px 4px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    background: #88bdf1;
    border-radius: 10px;
    img {
      width: 12px;
      height: 12px;
      //margin-right: 2px;
    }
    span {
      margin-left: 2px;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      font-weight: bold;
      color: white;
    }
  }
  }
  .bottom{
    margin-top:8px;
  }
  .footer{
    display: flex;
    .footer_item{
      flex: 1;
      padding: 5px 10px;
      span{
        padding: 1px;
        font-size: 14px;
      }
      .icon{
          vertical-align: bottom;
      }
    }
  }
}
</style>